<template>
        <div class="tarbar-item" @click="clickItem()">
          <slot v-if='!isActive' name='item-cron'>
          </slot>
          <slot v-else name='item-cron-active'>
          </slot>
          <!-- <div :class='{activeColor:isActive}'> -->
            <div :style="activeStyle">
            <slot name='item-name'>
              <div>
                首页
              </div>
            </slot>
          </div>

        </div>

</template>

<script>
  export default {
    name:'',
    components: {},
    props: {
      path:String,
      activeColorDIY:{
        type:String,
        default:'red',
      }
    },
    data() {
      return {
        activeColor:false,
      };
    },
    computed: {
      isActive(){
        console.log("111"+this.path+"--"+this.$route.path);
        return this.$route.path.indexOf(this.path) !== -1;
      },
      activeStyle(){
        return this.isActive ? {color:this.activeColorDIY}:{};
      }
    },
    methods: {
      clickItem(){
        console.log("点击了"+this.path+"--"+this.$route.path);
        this.$router.push(this.path);
      }
    },
    created() {},
    mounted() {}
  };
</script>

<style >
  
  .tarbar-item {
  flex:1;
  text-align: center; 
  height: 49px;

  }

.tarbar-item img {
    width: 24px;
    height: 24px;
    }

.activeColor {
  color: red;
}
</style>